import React from 'react';
import { Redirect, BrowserRouter, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import { Row, Col } from 'antd';
import LeftNav from '../../components/LeftNav';
import Header from '../../components/Header';
import Footer from '../../components/Footer';
import Home from '../../pages/Home';
import User from '../../pages/User';
import Article from '../../pages/Article';
import ArticleEdit from '../../pages/ArticleEdit';
import './index.scss';

const Index = (props) => {
  const { loginStatus } = props;
  if(loginStatus) {
    return (
      <BrowserRouter>
        <Row className='container'>
          <Col span='4' className='nav-left'>
            <LeftNav/>
          </Col>
          <Col span='20' className='main'>
            <Header/>
            <Route path='/home' exact component={Home}></Route>
            <Route path='/home/user' exact component={User}></Route>
            <Route path='/home/article' exact component={Article}></Route>
            <Route path='/home/articleEdit' exact component={ArticleEdit}></Route>
            <Footer/>
          </Col>
        </Row>
      </BrowserRouter>
    );
  } else {
    return <Redirect to='/login' />
  }
}

const mapState = (state) => ({
  loginStatus: state.getIn(['login', 'loginStatus'])
});

export default connect(mapState, null)(Index);